<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>设置</title>
  <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
  <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  </head>
  <style>
      #app{
        width: 100%;
      }
      .content{
        width: 100%;
        margin-top: 0.3rem;
        background: #fff;
        margin-bottom: 0.3rem;
      }
      .content .content_one{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.53rem 0 0.53rem 0;
        width: 92%;
        margin: 0 auto;
      }
      .content .content_one .text{
        font-size: 0.7rem;
        color: #666;
      }
      .content .content_one .btn{
        width: 2.35rem;
      	height: 1.35rem;
      	background-image: linear-gradient(90deg,
      		#3290c6 0%,
      		#1e8ce3 0%,
      		#0a87ff 0%,
      		#5fc2b8 100%),
      	linear-gradient(
      		#263b72,
      		#263b72);
          border-radius: 0.68rem;
      }
      .content .content_one .btn .zreo{
        width: 1.25rem;
      	height: 1.35rem;
      	background-color: #ffffff;
      	box-shadow: 0rem 0.15rem 0.41rem 0.05rem
      		rgba(0, 0, 0, 0.23);
        border-radius: 50%;
      }
      .last{
        width: 100%;
        background: #fff;
      }
      .last .box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        border-top: 0.03rem solid #f2f2f5;
        width: 92%;
        margin: 0 auto;
        background: #fff;
      }
      .last .box .left{
        font-size: 0.7rem;
        color: #666;
      }
      .last .box .right{
        font-size: 0.7rem;
        color: #b2b2b8;
      }
      .last .box .right img{
        width: 0.35rem;
        height: 0.65rem;
        display: inline-block;
      }
  </style>
  <body>
  <div id="app">
      <div class="content">
          <div class="content_one">
            <div class="text">消息提醒</div>
            <div class="btn"><div class="zreo"></div></div>
          </div>
      </div>
      <div class="last">
          <div class="box" v-for="(list,index) in datalist" @click="modify(list.id,'set_up',list.page,list.type)" :key="list.id">
            <div class="left">{{list.text1}}</div>
            <div class="right">{{list.text2}}<img :src="list.img" alt="" :style="{'display':index==0?'none':'inline-block'}"></div>
          </div>
      </div>
  </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-slide.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
      new Vue({
        el:"#app",
        data:{
          datalist:[
            {text1:'清除缓存',text2:'0.06M ',img:'../../image/right.png',id:0},
            {text1:'支付密码',img:'../../image/right.png',id:1},
            {text1:'关于我们',img:'../../image/right.png',id:2,type:'关于我们',page:'myself/set_up'},
          ]
        },
        methods:{
          modify:function(id,name,page,type){
              console.log(id)
              console.log(page)
              console.log(type)
              switch (id) {
                // 跳转到关于我们
                case 2:
                api.openWin({
                    name: name,
                    url: '../header/user_header.html',
                    pageParam: {
                      name: page,
                      type:type
                    }
                });
                console.log(id)
                break;
              }
          }
        }
      })
  </script>
  </html>
